<template>
  <div>
    <!-- 数据显示 -->
    <el-table
      :data="tableData"
      height="500"
      style="width: 100%"
      max-height="500"
      border
      v-loading="loading"
    >
      <el-table-column type="index" label="序号" width="80" align="center" />
      <el-table-column
        prop="name"
        label="项目类别"
        width="200"
        align="center"
      />

      <el-table-column label="操作" align="center" width="200">
        <template #header>
          <el-button
            size="mini"
            type="primer"
            @click="this.projectClassAdd = true"
            :disabled="!this.hasAuth('sys:sysParam:projectClass:add')"
            >添加</el-button
          >
        </template>
        <template #default="scope">
          <el-button
            type="primary"
            @click="handleEdit(scope.row.id)"
            :disabled="!this.hasAuth('sys:sysParam:projectClass:update')"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)"
            :disabled="!this.hasAuth('sys:sysParam:projectClass:delete')"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 数据添加 -->
    <el-drawer
      v-model="projectClassAdd"
      title="项目级别添加"
      :show-close="false"
      @close="this.$refs.projectClassInfo.resetFields()"
    >
      <el-form
        ref="projectClassInfo"
        :model="projectClassInfo"
        label-width="100px"
        label-position="left"
        :rules="rules"
      >
        <el-form-item label="项目级别" prop="name">
          <el-input v-model="projectClassInfo.name" type="text"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('paperLevelInfo')"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-drawer>

    <!-- 数据修改 -->
    <el-drawer
      v-model="projectClassUpdate"
      title="项目级别修改"
      :show-close="false"
      @close="this.$refs.projectClassInfo.resetFields()"
    >
      <el-form
        ref="projectClassInfo"
        :model="projectClassInfo"
        label-width="130px"
        label-position="left"
        :rules="rules"
      >
        <el-form-item label="项目级别名称" prop="name">
          <el-input v-model="projectClassInfo.name" type="text"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitFormUpdate('projectClassInfo')"
            >修改</el-button
          >
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>
<script>
import axios from "../../../utils/request";
import { ElMessage } from "element-plus";
export default {
  name: "paperLevel",
  inject: ["reload"],
  data() {
    return {
      tableData: [],
      loading: false,
      projectClassAdd: false,
      projectClassUpdate: false,
      projectClassInfo: {},
      rules: {
        name: [
          { required: true, message: "该字段不允许为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleDelete(row) {
      axios
        .get("/ProjectClassic/delete", { params: { id: row.id } })
        .then((res) => {
          if (res.data.status === 200) {
            ElMessage.success(res.data.message);
            this.reload();
          } else {
            ElMessage.error(res.data.message);
          }
        });
    },
    handleEdit(id) {
      this.projectClassUpdate = true;
      axios
        .get("/ProjectClassic/detail", { params: { id: id } })
        .then((res) => {
          this.projectClassInfo = res.data.data.projectLevel;
        });
    },
    // 获取项目类别
    getProjectLevelInfo() {
      this.loading = true;
      axios.get("/ProjectClassic/ProjectClassicAll").then((res) => {
        if (res.data.status === 200) {
          this.tableData = res.data.data.projectClassic;
          this.loading = false;
        }
      });
    },
    //添加
    submitForm(val) {
      this.$refs.projectClassInfo.validate((valid) => {
        if (valid) {
          axios
            .post("/ProjectClassic/insert", this.projectClassInfo)
            .then((res) => {
              if (res.data.status === 200) {
                ElMessage.success(res.data.message);
                this.reload();
              } else {
                ElMessage.error(res.data.message);
              }
            });
        } else {
          return false;
        }
      });
    },
    submitFormUpdate(val) {
      this.$refs.projectClassInfo.validate((valid) => {
        if (valid) {
          axios
            .post("/ProjectClassic/update", this.projectClassInfo)
            .then((res) => {
              if (res.data.status === 200) {
                ElMessage.success(res.data.message);
                this.reload();
              } else {
                ElMessage.error(res.data.message);
              }
            });
        } else {
          return false;
        }
      });
    },
    hasAuth(perm) {
      var authority = this.$store.state.menus.permList;
      return authority.indexOf(perm) > -1;
    },
  },
  mounted() {
    this.getProjectLevelInfo();
  },
};
</script>
